import React, { useState, useEffect } from 'react'
import { DatePicker, Tabs } from 'antd-mobile'
import moment from 'moment'
import { Pie, Bar } from '@ant-design/plots'
import db from '../../util/db'
import ICON_DATE from '../../svg/riqi.svg'
import Header from '../../component/Header'
import ICON_RESET from '../../svg/reset.svg'
export default function History() {
  const [datePickVisit, setVisit] = useState(false)
  const [pieData, setPieData] = useState([])
  const [payDetailList, setPayDetailList] = useState([])
  const [pickValue, setPickValue] = useState(new Date())
  const config = {
    appendPadding: 10,
    data: pieData,
    angleField: 'money',
    colorField: 'type',
    radius: 0.9,
    legend: {
      position: 'bottom'
    },
    label: {
      type: 'inner',
      offset: '-30%',
      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
      style: {
        fontSize: 14,
        textAlign: 'center'
      }
    },
    interactions: [
      {
        type: 'element-active'
      }
    ]
  }
  useEffect(() => {
    let month = moment(pickValue).format('YYYYMM')
    db.qryAllDataByMonth(month, ret => {
      console.log('ret:', ret)
      let payObj = { money: 0, type: '支出' }
      let incomeObj = { money: 0, type: '收入' }
      ret.map(item => {
        if (item.type === 'INCOME') {
          incomeObj.money = incomeObj.money + item.money
        } else {
          payObj.money = payObj.money + item.money
        }
      })
      const payDetailList = ret
        .map(item => {
          if (item.type === 'PAY') {
            const newItem = {
              money: item.money,
              type: item.detailType.cn
            }
            return newItem
          }
        })
        .filter(item => item)
      setPieData([payObj, incomeObj])
      console.log(payDetailList)
      setPayDetailList(payDetailList)
    })
  }, [pickValue])

  const dateConfirm = val => {
    console.log(`时间选择:${val}`)
    setPickValue(val)
  }

  const renderHeader = () => {
    return (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          paddingLeft: '15px',
          paddingRight: '15px'
        }}
      >
        <div
          style={styles.hearderView}
          onClick={() => {
            setVisit(true)
          }}
        >
          <span
            style={{
              color: '#0099ff',
              fontWeight: 'bold',
              fontSize: '18px',
              marginRight: '3vw'
            }}
          >
            {moment(pickValue).format(`YYYY年MM月`)}
          </span>
          <img
            src={ICON_DATE}
            style={{ height: '20px', width: '20px' }}
            alt={''}
          />
        </div>

        <div
          style={styles.hearderView}
          onClick={() => {
            setPickValue(new Date())
          }}
        >
          <img
            src={ICON_RESET}
            style={{ height: '20px', width: '20px' }}
            alt={''}
          />
        </div>
      </div>
    )
  }
  return (
    <div style={styles.page}>
      <Header title='History' />
      {renderHeader()}
      <DatePicker
        max={new Date()}
        visible={datePickVisit}
        onClose={() => {
          setVisit(false)
        }}
        value={pickValue}
        precision='month'
        onConfirm={dateConfirm}
      />
      <div style={styles.mainContainer}>
        <div style={{ height: '35vh' }}>
          <Pie {...config} />
        </div>
        <div style={{ height: '35vh' }}>
          <Tabs>
            <Tabs.Tab
              title='收入'
              key='income'
            >
              <div style={{ height: '35vh', overflow: 'scroll',textAlign: 'center' }}>
                {payDetailList?.length ? <Bar
                  data={payDetailList}
                  xField={'money'}
                  yField={'type'}
                /> : '暂无数据'}
              </div>
            </Tabs.Tab>
            <Tabs.Tab
              title='支出'
              key='pay'
            >
              支出
            </Tabs.Tab>
          </Tabs>
        </div>
      </div>
    </div>
  )
}

const styles = {
  page: {
    flex: 1,
    backgroundColor: '#fff',
    display: 'flex',
    flexDirection: 'column'
  },
  mainContainer: {
    backgroundColor: '#EFF3FF',
    borderTopLeftRadius: '15px',
    borderTopRightRadius: '15px',
    marginTop: '1vh',
    flex: 1
  },
  detailContainer: {
    display: 'flex',
    justifyContent: 'space-between'
  },
  listContainer: {
    marginTop: '3%',
    height: '65vh',
    overflow: 'auto'
  },
  listEmptyCard: {
    marginTop: '3vh'
  },
  hearderView: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: '1vh'
  }
}
